<template>
  <div>
    <!-- <el-card class="box-card">
      <el-button type="primary" size="min">导入</el-button>
      <el-button type="primary" size="min" @click="addClick"
        >+新增员工</el-button
      >
    </el-card> -->
    <pagetools :showLeft="true">
      <template #left>
        员工管理
      </template>
      <template #right>
        <el-button type="primary" size="min" @click="toImport">导入</el-button>
        <el-button type="primary" size="min" @click="addClick"
          >+新增员工</el-button
        >
      </template>
    </pagetools>
    <!-- --------------------------------- -->
    <el-card class="box-card">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column
          label="序号"
          type="index"
          width="100px"
        ></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="手机号" prop="mobile"></el-table-column>
        <el-table-column label="工号" prop="workNumber"></el-table-column>
        <el-table-column label="聘用形式">
          <template slot-scope="{ row }">{{
            row.formOfEmployment | myemploy
          }}</template></el-table-column
        >
        <el-table-column label="部门"></el-table-column>
        <el-table-column label="入职时间">
          <template slot-scope="{ row }">
            {{ row.timeOfEntry | mymoment }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400">
          <template slot-scope="{ row }">
            <el-button type="text" @click="toDatail(row.id)">查看</el-button>
            <el-button type="text">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button type="text" @click="openRole(row.id)">角色</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="pagesizes"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <addDept :dialogShow.sync="dialogShow" @getUserList="getUserList"></addDept>
    <!-- 分配角色面板 -->
    <el-dialog title="分配角色" :visible.sync="roleShow">
      <el-form>
        <el-form-item>
          <div>{{ roleList }}</div>
          <el-checkbox-group v-model="roleList">
            <el-checkbox
              v-for="(item, index) in allRole"
              :key="index"
              :label="item.id"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <div style="text-align: center">
            <el-button type="primary" @click="submit">确定</el-button>
            <el-button @click="roleShow = false">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import QrCode from "QrCode";
import { getUserListApi, userAddApi, setRoleApi } from "@/api/elmentyess";
// 所有角色信息接口
import { getAllRoleApi } from "@/api/role.js";
export default {
  data() {
    return {
      dialogShow: false,
      tableData: [],
      page: 1,
      pagesizes: [4, 8, 12, 16, 20],
      pagesize: 8,
      total: 0,
      // 选中的角色数组
      roleList: [],
      // 所有的角色列表
      allRole: [],
      // 角色显示面板
      roleShow: false,
      // 列表
      // list: [],
      // 当前操作员工的 id
      currentId: ""
    };
  },
  methods: {
    // 提交给员工分配角色
    async submit() {
      await setRoleApi({
        id: this.currentId,
        roleIds: this.roleList
      });
      // 提示修改成功
      this.$message.success("修改成功");
      // 关闭面板
      this.roleShow = false;
      // 更新数据
      this.getUserList();
    },
    // 获取所有角色列表
    async getAllRole() {
      const res = await getAllRoleApi();
      // console.log(res);
      // 保存所有的角色列表
      this.allRole = res.data.rows;
    },
    // 打开角色面板
    async openRole(id) {
      // 打开面板保存id
      this.currentId = id;
      // id 当前点击数据的 id
      this.roleShow = true;
      // 得到当前点击员工的角色信息
      const res = await userAddApi(id);
      // 保存当前点击员工的角色信息
      this.roleList = res.data.roleIds;
    },

    showChick(src) {
      // console.log(src)
      this.mysrc = src;
      this.show = true;
      console.log(this.mysrc);
      this.$nextTick(() => {
        QrCode.toCanvas(this.$refs.mycanvas, this.mysrc, {
          width: 100,
          height: 100
        });
      });
    },
    // 跳转到 import 中
    toImport() {
      this.$router.push("/employees/import");
    },
    // 页容量发生改变
    handleSizeChange(size) {
      this.pageSize = size;
      this.getUserList();
    },
    // 当前页发生改变
    handleCurrentChange(page) {
      this.page = page;
      this.getUserList();
    },
    async getUserList() {
      const res = await getUserListApi({
        page: this.page,
        size: this.pageSize
      });
      // console.log(res)
      // 保存数据
      this.tableData = res.data.rows;
      this.total = res.data.total;
    },
    // 查看
    examine() {
      this.dialogShow = true;
    },
    // 新增
    addClick() {
      this.dialogShow = true;
    },
    toDatail(id) {
      this.$router.push(`./employees/detail?id=${id}`);
    }
  },
  components: {
    addDept: () => import("./components/add-dept.vue")
  },
  // 更新数据
  created() {
    this.getUserList();
    this.getAllRole();
  }
};
</script>

<style></style>
